<template>

  <div>
    <el-header>
      <el-form inline style="margin-top: 20px">
        <el-form-item label="状态">
          <el-select style="width: 100px" v-model="statusFilter" placeholder="选择状态">
            <el-option label="未处理" :value="0"></el-option>
            <el-option label="已批准" :value="1"></el-option>
            <el-option label="已拒绝" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select style="width: 100px" v-model="typeFilter" placeholder="选择类型">
            <el-option label="歌手" value="歌手"></el-option>
            <el-option label="乐队" value="乐队"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地区">
          <el-input size="default" v-model="areaFilter" placeholder="输入地区"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-header>

    <el-main>
        <el-table border :data="applications" style="width: 100%">
          <el-table-column prop="account" label="申请账号"></el-table-column>
          <el-table-column prop="musicianName" label="音乐人名字"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="area" label="地区"></el-table-column>
          <el-table-column prop="applyTime" label="申请时间"></el-table-column>
          <el-table-column
              prop="status"
              label="状态"
          >
            <template #default="scope">
              <el-tag v-if="scope.row.status === 0" type="info">未处理</el-tag>
              <el-tag v-else-if="scope.row.status === 1" type="success">已批准</el-tag>
              <el-tag v-else type="danger">已拒绝</el-tag>
            </template>

          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <div style="display: flex">
                <el-text type="info" style="white-space: pre;cursor: pointer;margin-right: 10px" @click="viewDetails(scope.row)" >详情</el-text>
                <el-button plain
                           @click="approve(scope.row)"
                           :disabled="scope.row.status !== 0">批准</el-button>
                <el-button
                    :disabled="scope.row.status !== 0"
                    @click="reject(scope.row)">拒绝</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

          <el-pagination
              style="margin-top: 10px;padding: 5px"
              :current-page="currentPage"
              :page-size="pageSize"
              :total="total"
              :page-sizes="[5, 10, 15, 20]"
              @current-change="(value) => currentPage = value"
              @size-change="(value) => pageSize = value"
              size="large"
              layout="jumper, ->, sizes, total, prev, pager, next"
          ></el-pagination>
      </el-main>

  </div>

  <!-- 详情对话框 -->
  <el-dialog v-model="showDetails" title="音乐人详情">
    <el-image :src="detailData.musicianAvatar" style="width: 150px;height: 150px"></el-image>
    <p>名字：{{ detailData.musicianName }}</p>
    <p>类型：{{ detailData.type }}</p>
    <p>地区：{{ detailData.area }}</p>
    <p>简介：{{ detailData.brief }}</p>
    <span slot="footer" class="dialog-footer">
          <el-button @click="showDetails = false">关闭</el-button>
          <el-button :disabled="detailData.status !== 0" plain @click="approve(detailData)">批准</el-button>
          <el-button :disabled="detailData.status !== 0" @click="reject(detailData)">拒绝</el-button>
        </span>
  </el-dialog>



</template>

<script setup>
import {computed, onMounted, ref, watch} from "vue";
import {doMusicianApproval, queryMusicianPages} from "@/api/approval/approval.js";
import {ElMessage, ElMessageBox} from "element-plus";

// 筛选条件
const statusFilter = ref();
const typeFilter = ref();
const areaFilter = ref();

// 列表数据
const applications = ref([


]);
const currentPage = ref(1);
const pageSize = ref(10)
const total = ref(0)
// // 一共多少页
// const pageCount = ref(null)

// 详情数据
const showDetails = ref(false);
const detailData = ref({});
const listLoading = ref(false)

const getList = () => {
  listLoading.value = true
  queryMusicianPages(statusFilter.value == null ? '' : statusFilter.value,
      typeFilter.value , areaFilter.value, currentPage.value, pageSize.value).then((res) => {
    applications.value = res.data.records
    // pageCount.value = res.data.pages
    total.value = res.data.total
    listLoading.value = true
  })
}

watch(currentPage, () => getList())
watch(pageSize, () => getList())

// 查看详情
const viewDetails = (row) => {
  detailData.value = row;
  showDetails.value = true;
}
// 批准申请
const approve = async (rowData) => {

  writeDes().then(({value}) => {
    doMusicianApproval(rowData.id, 1, value).then((res) => {
      if (res.data != null) {
        rowData.status = res.data
      } else {
        ElMessage.success("同意成功")
        rowData.status = 1
      }

    })
  })
}
// 拒绝申请
const reject = async (rowData) => {
  writeDes().then(({value}) => {
    doMusicianApproval(rowData.id, 2, value).then((res) => {
      if (res.data != null) {
        rowData.status = res.data
      } else {
        ElMessage.success("拒绝成功")
        rowData.status = 2
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '输入不合规'
    })
  })
}

const writeDes = () => {
  return ElMessageBox.prompt('请填写备注', '必须', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /^[\s\S]{5,100}$/,
    inputErrorMessage: '输入内容长度需在5到100字之间'
  })

}
onMounted(() => {
  getList()
})
</script>


<style scoped>
</style>
